<template>
  <div class="order-list">
    <el-container>
      <el-main>
        <!-- 页面标题 -->
        <div class="page-header">
          <h1 class="page-title">我的订单</h1>
          <p class="page-subtitle">查看和管理您的所有订单</p>
        </div>

        <!-- 使用可复用的订单列表组件 -->
        <OrderListComponent 
          :show-header="false"
          @order-click="handleOrderClick"
          @order-action="handleOrderAction"
        />
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import OrderListComponent from '@/components/OrderListComponent.vue'

// 事件处理
const handleOrderClick = (orderId: number) => {
  console.log('订单点击:', orderId)
}

const handleOrderAction = (action: string, orderId: number) => {
  console.log('订单操作:', action, orderId)
}
</script>

<style scoped>
.order-list {
  min-height: calc(100vh - 64px);
  background-color: #f8fafc;
}

.page-header {
  margin-bottom: 24px;
  text-align: center;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 8px;
}

.page-subtitle {
  font-size: 16px;
  color: #909399;
}
</style>
